<!doctype html>

<html lang="en">
<head>
	<title>Toxiclibs.js toxi.processing.ToxiclibsSupport demo + Processing.js - WebGL</title>
	<meta name="author" content="Kyle Phillips">
	<link href="css/style.css" rel="stylesheet" type="text/css">
	<!-- Date: 2011-01-09 -->
	<script type="text/javascript" src="../build/toxiclibs.js"></script>
	<script type="text/javascript" src="js/processing.js"></script>
</head>
<body class="container_12">
<header class="grid_12">
	<hgroup>
		<h1>toxi.processing.ToxiclibsSupport</h1>
		<h2>w/ <a href="http://processingjs.org">Processing.js</a></h2>
	</hgroup>
</header>

<script id="code" type="text/processing" data-processing-target="myCanvas">


import toxi.geom.*;


ToxiclibsSupport gfx;
AABB box;
Cone cone;
AxisAlignedCylinder cylinder;
Line3D line;
Sphere sphere;
Ray3D ray;
int numLines = 20;
Vec3D[] lineStrip;

void setup() {
  size(640,560,OPENGL);
  gfx = new toxi.processing.ToxiclibsSupport(this);
  box = new toxi.geom.AABB(new toxi.geom.Vec3D(), new toxi.geom.Vec3D(100,100,100));
  cone = new toxi.geom.Cone(toxi.geom.Vec3D.randomVector(),new toxi.geom.Vec3D(10,10,10),50,4,300);
  //console.log(cone);
  cylinder = new toxi.geom.YAxisCylinder(new toxi.geom.Vec3D(),50,100);
  sphere = new toxi.geom.Sphere(80);
  line =  new toxi.geom.Line3D(new toxi.geom.Vec3D(-500,-500,-50), new toxi.geom.Vec3D(500,500,50));
  ray = new toxi.geom.Ray3D(new toxi.geom.Vec3D(), new toxi.geom.Vec3D(-25,-25,25));
  
  lineStrip = new toxi.geom.Vec3D[numLines];
  for(int i=0;i<numLines;i++){
  	lineStrip[i] = new toxi.geom.Vec3D(toxi.geom.Vec3D.randomVector().scaleSelf(height*0.5));
  }
  console.log(lineStrip);
}

void draw() {
  background(0);
  noFill();
  translate(width/2,height/2);
  rotateY(frameCount/500);
  rotateX(frameCount/800);
  gfx.origin(300);
  stroke(255,0,0,128);
  strokeWeight(2);
  gfx.box(box);
  stroke(0,0,255,128);
  gfx.cone(cone,9,true);
  stroke(0,255,0,128);
  gfx.cylinder(cylinder,12);
  stroke(255,255,0,128);
  gfx.line(line);
  stroke(0,255,255,32);
  gfx.lineStrip3D(lineStrip);
  stroke(255,0,255,96);
  gfx.sphere(sphere,8);
  stroke(255,255,255);
  gfx.ray(ray,20);
 }

</script>
<script>
	var code = document.getElementById("code").innerHTML;
	console.log(Processing.compile(code).sourceCode);
</script>
<div class="grid_12">
<canvas id="myCanvas" width="200" height="200">
	your browser doesnt support canvas
</canvas>
</div>
<section id="details" class="grid_12">
<aside id="authors" class="grid_6">
<p>Toxiclibs ported to js by <a href="http://workofkylephillips.com">Kyle Phillips</a>
</p>
</aside>
<article id="description" class="grid_12">
<p>This demonstration shows the ease of using Toxiclibs.js with Processing.js in WebGL mode.</p>
</article>
</section>
<footer class="grid_12"><a href="http://haptic-data.com">toxiclibs.js
</a></footer>
</body>
</html>
